<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Social Network - Administrator </title>

        <!-- Bootstrap core CSS -->
        <link href="assets/css/admin/bootstrap.css" rel="stylesheet">

        <!-- Add custom CSS here -->
        <link href="./assets/css/admin/sb-admin.css" rel="stylesheet">
        <link href="./assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="./assets/fancybox/source/jquery.fancybox.css" rel="stylesheet">
        <link rel="icon" type="image/png" href="assets/images/22.jpg">
    </head>

    <body>

        <div id="wrapper">

            <!-- Sidebar -->
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"> Administrator </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav side-nav">
                        <li class="active"><a href="forms.html"><i class="fa fa-edit"></i> Administrator </a></li>

                    </ul>

                    <ul class="nav navbar-nav navbar-right navbar-user">

                        <li class="dropdown user-dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Administrator <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                                <li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
                                <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                                <li class="divider"></li>
                                <li><a href="/SocialNetwork/Logout"><i class="fa fa-power-off"></i> Log Out</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </nav>

            <div id="page-wrapper">

                <div class="row">
                    <div class="col-lg-12">
                        <h1>Administrator <small>Create new user</small></h1>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                            <li class="active"><i class="fa fa-edit"></i> Forms</li>
                        </ol>
                    </div>
                </div><!-- /.row -->

                <div class="row">

                    <div class="col-lg-6">

                        <h1>New User</h1>

                        <form id="formAdd" action="/SocialNetwork/AddUser" method="POST">

                            <div class="form-group has-success">
                                <label class="control-label" for="inputSuccess">First Name</label>
                                <input type="text" class="form-control" name="fname" id="inputSuccess"   title="Example : John  "/>
                            </div>

                            <div class="form-group has-warning">
                                <label class="control-label" for="inputWarning">Last Name</label>
                                <input type="text" class="form-control" name="lname" id="inputWarning" title="Example : Lewis Phillips">
                            </div>

                            <div class="form-group has-error">
                                <label class="control-label" for="inputError" >Email</label>
                                <input type="text" class="form-control" name="email" id="inputError" title="example@mail.com">
                            </div>
                            <input type="submit" class="btn btn-default" value="Submit Button">
                        </form>
                        
                        <a class="fancybox" href="#inline"></a>
                        <div id="inline" style="width:450px;height: 15px ;display:none; vertical-align:middle; text-align:center">
                            <p>Please Wait</p>
                            <img style="margin: 0" src="./assets/images/ajax-loader.gif"/>
                        </div>

                    </div>
                </div><!-- /.row -->
                
                <div class="row">
                    <div class="col-lg-12">
                        <h1><small></small></h1>
                        <div id="alert" class="alert alert-info alert-dismissable">
                            Status Messages
                        </div>
                    </div>
                </div><!-- /.row -->
                
                <div class="row" style="margin-top: 20px">
                    <div class="col-lg-12">
                        <div id="alert" class="alert">
                            Social Network  - copyright 2014
                        </div>
                    </div>
                </div><!-- /.row -->
                

            </div><!-- /#page-wrapper -->

        </div><!-- /#wrapper -->

        <!-- JavaScript -->

        <script src="./assets/js/admin/jquery-1.10.2.js"></script>
        <script src="./assets/js/admin/saveuserajax.js"></script>
        <script src="./assets/fancybox/source/jquery.fancybox.js"></script>
        <script src="./assets/fancybox/source/jquery.fancybox.pack.js"></script>
        <script src="./assets/js/admin/bootstrap.js"></script>
        <script type="text/javascript">
            $(".fancybox").fancybox({
                helpers: {
                    title: {
                        type: 'inside',
                    },
                    overlay: {
                        css: {
                            'background': 'rgba(58, 42, 45, 0.95)'
                        },
                        closeClick: false,
                    }
                },
                modal: true,
            });
        </script>
    </body>
</html>